<template>
	<view>
		<view class="timeline-small">
		    <view class="timeline-small-body">
		        <ul class="dis">
		            <li>
						
		                <view class="bullet pink"></view>
		                <view class="date">v4.0.7</view>
		                <view class="desc">
		                    <!-- <h3>内容段落1</h3> -->
		                    <!-- <h4>内容段落2内容段落2内容段落2内容段落2</h4> -->
							<ul>
								<li>1、消息模块升级，采用模块化处理方式；</li>
								<li>2、消息首页支持分页加载，历史会话丢不了！</li>
								<li>3、聊天消息的消息的回复引用功能实现；</li>
								<li>4、自定义表单中折叠控件的支持；</li>
								<li>5、其他已知问题优化处理。</li>
							</ul>
		                </view>
		            </li>
		            <li>
		                <view class="bullet orange"></view>
		                <view class="date">v4.0.7</view>
		                <view class="desc">
		                    <!-- <h3>内容段落1</h3> -->
		                    <!-- <h4>内容段落2内容段落2内容段落2内容段落2</h4> -->
							<ul>
								<li>1、消息模块升级，采用模块化处理方式；</li>
								<li>2、消息首页支持分页加载，历史会话丢不了！</li>
								<li>3、聊天消息的消息的回复引用功能实现；</li>
								<li>4、自定义表单中折叠控件的支持；</li>
								<li>5、其他已知问题优化处理。</li>
							</ul>
		                </view>
		            </li>
		            <li>
		                <view class="bullet blue"></view>
		                <view class="date">v4.0.7</view>
		                <view class="desc">
		                    <!-- <h3>内容段落1</h3> -->
		                    <!-- <h4>内容段落2内容段落2内容段落2内容段落2</h4> -->
							<ul>
								<li>1、消息模块升级，采用模块化处理方式；</li>
								<li>2、消息首页支持分页加载，历史会话丢不了！</li>
								<li>3、聊天消息的消息的回复引用功能实现；</li>
								<li>4、自定义表单中折叠控件的支持；</li>
								<li>5、其他已知问题优化处理。</li>
							</ul>
		                </view>
		            </li>
		            <li>
		                <view class="bullet green"></view>
		                <view class="date">v4.0.7</view>
		                <view class="desc">
		                    <!-- <h3>内容段落1</h3> -->
		                    <!-- <h4>内容段落2内容段落2内容段落2内容段落2</h4> -->
							<ul>
								<li>1、消息模块升级，采用模块化处理方式；</li>
								<li>2、消息首页支持分页加载，历史会话丢不了！</li>
								<li>3、聊天消息的消息的回复引用功能实现；</li>
								<li>4、自定义表单中折叠控件的支持；</li>
								<li>5、其他已知问题优化处理。</li>
							</ul>
		                </view>
		            </li>
		        </ul>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
		
	.desc>ul>li{
		color: #666666;
		font-size: 12px;
	}
 .timeline-small {
            max-width: 350px;
            max-height: 630px;
            overflow: hidden;
            margin: 30px auto 0;
            box-shadow: 0 0 40px #a0a0a0;
            font-family: 'Open Sans', sans-serif;
        }
        .timeline-small-body ul {
            padding: 1em 0 0 2em;
            margin: 0;
            list-style: none;
            position: relative;
        }
        .timeline-small-body>.dis::before {
            content: ' ';
            height: 100%;
            width: 5px;
            background-color: #d9d9d9;
            position: absolute;
            top: 0;
            left: 2.4em;
            z-index: -1;
        }
        .timeline-small-body li view {
            display: inline-block;
            margin: 1em 0;
            vertical-align: top;
        }
        .timeline-small-body .bullet {
            width: 1rem;
            height: 1rem;
            box-sizing: border-box;
            border-radius: 50%;
            background: #fff;
            z-index: 1;
            margin-right: 1rem;
            margin-top: 7%;
        }
        .timeline-small-body .bullet.pink {
            background-color: rgb(217,217,217);
            /* border: 3px solid #F93B69; */
        }
        .timeline-small-body .bullet.green {
            background-color: rgb(217,217,217);
            /* border: 3px solid #B0E8E2; */
        }
        .timeline-small-body .bullet.blue {
            background-color: rgb(217,217,217);
            /* border: 3px solid cadetblue; */
        }
        .timeline-small-body .bullet.orange {
            background-color: rgb(217,217,217);
            /* border: 3px solid #EB8B6E; */
        }
        .timeline-small-body .date {
            width: 48px;
            font-size: 0.75em;
           /* padding-top: 0.40rem;
            padding-right: 2rem; */
			background-color: rgb(0, 121, 254);
			color: white;
			text-align: center;
			border-radius: 2px;
			
        }
        .timeline-small-body .desc {
            width: 100%;
			margin-left: 80px;
        }
        .timeline-small-body h3 {
            font-size: 0.9em;
            font-weight: 400;
            margin: 0;
        }
        .timeline-small-body h4 {
            margin: 0;
            font-size: 0.7em;
            font-weight: 400;
            color: #808080;
        }

</style>
